import { refValue, converPX } from '../../utils/index.js';
export default (hook) => {
	const { $computed } = hook.$m;
	return {
		isJiess: true,
		name: 'JiessSpaceItem',
		setup({ $span, style, direction = 'row', className = '', ...attrs }) {
			const itemStyle = $computed(() => {
				// 仅允许向上查找一次，即寻找相邻的父级
				const { cols, gutter, span } = this.inject('jiess-space-data', 1);
				const colsNum = refValue(cols);
				const cGutter = converPX(refValue(gutter));
				// ============================================
				let rSpan = refValue($span || span);
				if (rSpan > colsNum) rSpan = colsNum;
				return {
					display: 'flex',
					position: 'relative',
					alignItems: 'center',
					marginRight: cGutter,
					width: `calc(${rSpan*100/colsNum}% - ${cGutter})`,
					// 容器内子元素的布局朝向
					flexDirection: direction,
					...refValue(style)
				};
			});
			this.add({
				className: ['jiess-space-item', className].filter(v => v).join(),
				children: { $slot: 'default' },
				style: { $proxy: itemStyle },
				...attrs
			});
		}
	}
}